import React, { useEffect, useState } from 'react'
import { Swiper, Image } from 'react-vant';
import { NavBar, Space, Toast, Button, SearchBar,Card } from 'antd-mobile'
import styles from './home.module.css'
import { BellOutline ,HeartFill} from 'antd-mobile-icons'
import { useNavigate, Outlet } from 'react-router-dom'
import axios from '../../api/axios';
import Hoc_login from '../../utils/Hoc_login';
function Index() {
    const [user, setuser] = useState(JSON.parse(localStorage.getItem('userInfo')))
    const [list, setList] = useState([])
    const [page,setPage]=useState(1)
    const [collectList,setcollectList]=useState(JSON.parse(localStorage.getItem('collectList')) ||[])
    console.log(user);
    let navigate = useNavigate()
    const images = [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
        'https://img.yzcdn.cn/vant/apple-4.jpg',
        'https://img.yzcdn.cn/vant/apple-5.jpg',
        'https://img.yzcdn.cn/vant/apple-6.jpg',
        'https://img.yzcdn.cn/vant/apple-7.jpg',
        'https://img.yzcdn.cn/vant/apple-8.jpg',
    ]
    const getlist = async() => {
        const res= await axios.get('/api/list',{params:{page}})
        console.log(res);
        const {code,data}=res.data
        if(code==200){
            setList([...list,...data])
        }
        

    }
    useEffect(() => {
        getlist()
    }, [])
    const handelsc=(item)=>{
        const collstate=collectList.some((it)=>it.id===item.id)
        if(collstate){
            const newcollectList=collectList.filter(it=>it.id !==item.id)
            setcollectList(newcollectList)
            localStorage.setItem('collectList',JSON.stringify(newcollectList))
        }else{
            setcollectList([item,...collectList])
             localStorage.setItem('collectList',JSON.stringify([item,...collectList]))
        }
    }
    const handelde=(id)=>{
        navigate('/detail',{state:id})
    }
    return (
        <div>
            <div style={{ backgroundColor: 'rgb(7, 11, 36);' }}>
                <NavBar style={{ backgroundColor: '#000' ,color:'#fff'}} left={'订票服务'} right={
                    <div className={styles.imgBox}>
                        <BellOutline fontSize={16} />
                        <Image src={user.avatar} className={styles.img}></Image>


                    </div>
                }
                ></NavBar>
            </div>
            <div className={styles.lbtbox}>
                <Swiper >
                    {images.map((image) => (
                        <Swiper.Item key={image} >
                            <Image lazyload src={image} height={200} width={200} className={styles.lbtimg} />
                        </Swiper.Item>
                    ))}
                </Swiper>
                <SearchBar placeholder='请输入内容' onFocus={() => navigate('/city')} className={styles.sea} />

            </div>
             <Card title='最新活动' extra={
                <div style={{color:'rgb(143, 24, 234)'}} onClick={()=>navigate('/search')}>
                    查看全部
                </div>
             }>
        </Card>

            <div >
                <div className={styles.listBox}>
                  
                  {
                    list.length>0 && list.map((item,ind)=>(
                        <div className={styles.listitem} onClick={()=>handelde(item.id)}>
                               <span className={styles.dw1}>音乐会</span> 
                               <span className={styles.dw2} ><HeartFill 
                               onClick={()=>handelsc(item)}
                               color={collectList.some((it)=>it.id===item.id)
                                ?'red'
                                :'#ccc'
                               }
                               /></span>
                            <Image src={item.image} width={280} height={280} className={styles.dw}></Image>
                            <div className={styles.listitem2}>
                                <div className={styles.listitem3}>
                                 <p>{item.title}</p>
                                <p style={{display:'flex'}}>
                                     <Image src={user.avatar} className={styles.img2}></Image>
                                    <span>{user.nickname}</span>
                                    
                                </p>
                                </div>
                                <div className={styles.listitem4}>
                                    <p>￥{item.price}</p>
                                </div>
                            </div>
                            <div>
                                <p>182 <span>参与者</span></p>
                            </div>
                        </div>
                        
                    ))
                }   
                </div>
               
            </div>
        </div>
    )
}

export default Hoc_login(Index) 
